<template>
  <div class="el-materialDistribution">
    <el-container>
      <el-header>
        <InnerHead />
      </el-header>
      <el-container>
        <el-aside :width=asideWidth>
          <div class="md-openClose" @click="listSwitch"></div>
          <MDList :curMenus=menus ref= "MDList" :updateCom=updateCom />
        </el-aside>
        <el-main>
            <!-- <router-view></router-view> -->
             <menuView :menus=menus :setMDListShow=setMDListShow ref="menuView"></menuView>
       
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import InnerHead from '../../components/InnerHead.vue'
import MDList from "./components/SmListV1.vue"
import menuView from "../../components/menuView.vue"


export default {
  name: "SortingMatchingV1",
  components:{
    InnerHead,
    MDList,
    menuView
  },
  data(){
    return{
      asideWidth:'200px',
      isSwitch:true,
      menus:[]
    }
  },
  methods:{
    listSwitch(){
      
      let box = document.querySelector('.md-openClose')
      if(this.isSwitch == true){
        box.style.clipPath = 'polygon(0 0,0 100%,100% 50%)'
        this.asideWidth = '0px'
        box.style.left = '0px'
        this.isSwitch = false
      }else if(this.isSwitch == false){
        box.style.clipPath = 'polygon(0 50%,100% 100%,100% 0)'
        this.asideWidth = '200px'
        box.style.left = '190px'
        this.isSwitch = true
      }
    }
 ,
  setMDListShow(menu){
    
    this.$refs.MDList.setShowMenu(menu);
  },
  updateCom(){
     this.$refs.menuView.updateView();
  }
  }
};
</script>
<style scoped>
.el-header {
    padding: 0;
    background:linear-gradient( to right,rgb(26, 96, 157),rgb(127, 239, 236));
}
.el-aside {
    height: calc(100vh - 60px);
    background:linear-gradient( to left bottom,#1279AF,#2BBFCF);
    padding-top: 16px;
    transition-duration: 0.2s;
}
.el-main {
  height: calc(100vh - 60px);
}
.md-openClose {
  width: 10px;
  height: 20px;
  background: #2BBFCF;
  clip-path: polygon(0 50%,100% 100%,100% 0);
  position: absolute;
  left: 190px;
  top: 60px;
  cursor: pointer;
  z-index: 99;
  transition-duration: 0.2s;
}
</style>